<script setup>
import { ref,onMounted, vShow } from 'vue'
import axios from 'axios';

//定义数据模型
const searchEmp = ref({name:'',gender:'',job:''})

//定义数据模型
const EmpList = ref([])

//定义函数search
const search = async() => {
   const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${searchEmp.value.name}&gender=${searchEmp.value.gender}&job=${searchEmp.value.job}`);
   EmpList.value = result.data.data;
   console.log(EmpList.value);
}

//定义函数clear
const clear = () => {
  searchEmp.value = {name:'',gender:'',job:''}
  search()
}

//定义钩子函数
onMounted(() => {
  search()
})


</script>




<template>

  <el-form :inline="true" :model="searchEmp" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="searchEmp.name" placeholder="请输入姓名" clearable />
    </el-form-item>
    <el-form-item label="性别">
      <el-select
        v-model="searchEmp.gender"
        placeholder="请选择性别"
        clearable
      >
        <el-option label="男" value="1" />
        <el-option label="女" value="2" />
       
      </el-select>
    </el-form-item>
     <el-form-item label="职位">
      <el-select
        v-model="searchEmp.job"
        placeholder="请选择职位"
        clearable
      >
        <el-option label="班主任" value="1" />
        <el-option label="讲师" value="2" />
        <el-option label="其他" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>

  <!-- 表格 --->
   <el-table :data="EmpList" border style="width: 100%">
    <el-table-column prop="id" label="序号" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="image" label="头像">
    <template #default="scope">
      <img :src="scope.row.image" style="width: 50px; height: 50px;" />
    </template>
    </el-table-column>
    <el-table-column prop="gender" label="性别">
    <template #default="scope">
      <span>{{ scope.row.gender === 1 ? '男' : '女' }}</span>
    </template>
    </el-table-column>
    <el-table-column prop="job" label="职位">
    <template #default="scope">
    <span v-if="scope.row.job === 1">班主任</span>
    <span v-else-if="scope.row.job === 2">讲师</span>
    <span v-else>其他</span>
   </template>
  </el-table-column>
    <el-table-column prop="entrydate" label="入职时间" />
    <el-table-column prop="updatetime" label="更新时间" />
  </el-table>

  
  
  
  
  
</template>




<style scoped>

</style>